Safariで表示できるアルファチャンネル付きAnimated WebPの作り方

まとめ

アルファチャンネルを含む Animated WebP を Safari で表示する場合、前のフレームのレンダリング結果をブレンドする設定とフレームを破棄する設定が有効なフレームを使用すると、レンダリング結果が壊れる様子

dispose と blend の解釈が他のレンダリングエンジンと異なってるのかもしれない

https://bugs.webkit.org/show_bug.cgi?id=217897

そのため、アルファチャンネルを含む Animated WebP を作る場合は各種ツールを使用してパラメータをある程度調整したり、得られた結果が期待しているフレーム設定 ( 少なくとも blend: no )になっているかを確認する必要がある

disposeとblendの確認方法

WebP のコマンドラインツールに含まれる webpmux を使うとフレームの情報を一覧にできる

Safariでも正常に表示できるGoogle公式の例のバナナを確認すると以下のようなフレーム情報が得られる

https://storage.googleapis.com/downloads.webmproject.org/webp/images/dancing_banana2.lossless.webp

code:sh

❯ webpmux -info ./dancing_banana2.lossless.webp

Canvas size: 990 x 1050

Features present: animation transparency

Background color : 0x00FFFFFF Loop Count : 0

Number of frames: 8 # ↓ココとココ

No.: width height alpha x_offset y_offset duration dispose blend image_size compression

1: 630 870 yes 240 180 100 background no 466 lossless

2: 750 930 yes 180 120 100 background no 528 lossless

3: 960 1050 yes 30 0 100 background no 762 lossless

4: 810 990 yes 30 60 100 background no 558 lossless

5: 630 870 yes 120 180 100 background no 468 lossless

6: 750 930 yes 60 120 100 background no 532 lossless

7: 960 1050 yes 0 0 100 background no 756 lossless

8: 810 990 yes 150 60 100 background no 554 lossless

一方正常に表示できないパターンは以下のような結果となる

dispose: background の場合、前のフレームのレンダリング結果を破棄する

blend: yes の場合、前のフレームのレンダリング結果に上書きする

code:sh

❯ webpmux -info ./tmp.webp

Canvas size: 450 x 450

Features present: animation transparency

Background color : 0xFFFFFFFF Loop Count : 0

Number of frames: 58 # ↓ココとココ

No.: width height alpha x_offset y_offset duration dispose blend image_size compression

1: 450 189 yes 0 146 80 background no 7494 lossy

2: 450 180 yes 0 158 80 none yes 7516 lossy

3: 450 202 yes 0 140 80 none no 7704 lossy

4: 450 269 yes 0 76 80 background no 8158 lossy

5: 434 285 yes 16 56 80 background yes 8114 lossy

...

gif2webpでGIFから変換する

Animated GIF を元にする場合は WebP のコマンドラインに付属する gif2webp を使用すると簡単

kmax でキーフレームの最大値を 1 に固定すると毎フレームがキーフレームとなり前のフレームの結果にブレンドされなくなる (デフォルトは0で自動判別)

gif2webp を使う場合は lossy や lossless、mixed、quality など細かく品質を指定できる

code:sh

# キーフレームを指定する以外はおまかせするパターン

img2webp -kmax 1 ./input.webp -o ./output.webp

# キーフレームを指定しつつ lossy 圧縮を指定して品質を30%にするパターン

gif2webp -kmax 1 -lossy -q 30 ./input.gif -o output.webp

webpmux で確認すると以下のようになる (lossy圧縮を有効にしたパターン)

code:sh

❯ webpmux -info ./output.webp

Canvas size: 450 x 450

Features present: animation XMP metadata transparency

Background color : 0x00000000 Loop Count : 0

Number of frames: 58 # ↓ココとココ

No.: width height alpha x_offset y_offset duration dispose blend image_size compression

1: 450 189 yes 0 146 80 background no 4758 lossy

2: 450 450 yes 0 0 80 none no 4928 lossy

3: 450 450 yes 0 0 80 none no 4984 lossy

4: 450 450 yes 0 0 80 none no 5254 lossy

5: 450 450 yes 0 0 80 none no 5232 lossy

...

ffmpegで変換する

ffmpegの場合は -lossless 1 を指定すると結果的にすべてのフレームで blend: no が指定される

gif2webp のように細かく指定できるパラメータがおそらくなさそうだった

海外のフォーラムなどにある「ロスレスにすると直った」というのはおそらくこのパターンが該当する

code:sh

ffmpeg -i ./input.gif -lossless 1 -loop 0 ./output.webp

webpmux で確認すると以下のようになる (compression は lossless で格納されているため比較的サイズは大きい)

code:sh

❯ webpmux -info ./output.webp

Canvas size: 450 x 450

Features present: animation transparency

Background color : 0xFFFFFFFF Loop Count : 0

Number of frames: 58 # ↓ココとココ

No.: width height alpha x_offset y_offset duration dispose blend image_size compression

1: 450 450 yes 0 0 80 none no 18936 lossless

2: 450 192 yes 0 146 80 none no 19202 lossless

3: 450 202 yes 0 140 80 none no 19684 lossless

4: 450 269 yes 0 76 80 none no 20542 lossless

5: 450 289 yes 0 56 80 none no 20694 lossless

...

webpmuxで静止画から作成する

以下のマニュアルを参考にしながら連番の静止画を元に Animated WebP を作成できる

https://developers.google.com/speed/webp/docs/webpmux?hl=ja

Animated WebP を元に変換することはできないのでこの手法を使用する場合は一旦バラバラの画像に分解する必要がある

(例は気が向いたら追記するかも)